<template>
  <div class="top">
    <div class="title">How can we help?</div>
    <div class="main">
      <el-input placeholder="Search for a topic"></el-input>
      <div class="seach"><iconSeach class="icon" style=""></iconSeach></div>
    </div>
  </div>
  <div class="one">
    <div class="box" v-for="section in boxList">
  <div class="title">{{ section.title }}</div>
  <a class="list-item" href="#" v-for="subItem in section.a">{{ subItem.li }}</a>
    </div>
  </div>
  <div class="two">
    <div class="title">Quick Answers</div>
    <div class="text">Find answers, tips, and troubleshooting instructions based on our most viewed topics.</div>
    <div class="big-box">
      <div class="menu">
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-supplies.png"></div>
          <div class="text">USPS Tracking®</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu">
        <div class="box">
          <div class="img"><img src="../../assets/icon/informed-delivery-mask-2.png"></div>
          <div class="text">Informed Delivery®</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu">
        <div class="box">
          <div class="img"><img src="../../assets/icon/package-intercept-mask-2.png"></div>
          <div class="text">Package Intercept</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu">
        <div class="box">
          <div class="img"><img src="../../assets/icon/usps-change-of-address-mask.png"></div>
          <div class="text">Change of Address</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu">
        <div class="box">
          <div class="img"><img src="../../assets/icon/usps-mail-and-ship-mask-3.png"></div>
          <div class="text">Mail & Ship</div>
          <div class="mo"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="three"><a href="#">View All Topics</a></div>
  <div class="four">
    <div class="box" v-for="item in cardList">
      <div class="title">{{ item.title }}</div>
      <div class="text">&emsp;{{ item.text }}</div>
      <div class="button">
        <el-button>{{ item.button }}</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import iconSeach from '../../assets/icon/seachr-two.vue'
import informed from '../../assets/icon/informedDelivery.vue'

import {ref} from 'vue'

const boxList=ref([
  {
    title:'USPS Tracking®',
    a:[
      {li:'USPS Tracking® - The Basics'},
      {li:'USPS Tracking Plus® - The Basics'},
      {li:'How to find your tracking number'},
      {li:'Where is my package? Tracking Status Help'},
    ]
  },
  {
    title:'Missing, Late or Damaged Mail & Packages',
    a:[
      {li:'Missing Mail - The Basics'},
      {li:'No mail delivery?'},
      {li:'How is Undeliverable and Misdelivered Mail Handled?'},
      {li:'Delayed mail and packages?'},
    ]
  },
  {
    title:'Trending Topics',
    a:[
      {li:'Informed Delivery® - The Basics'},
      {li:'Mail Service Alerts and Updates'},
      {li:'Change of Address - The Basics'},
      {li:'USPS Retail Customer Appointment Scheduler™'},
      {li:'USPS Ground Advantage®'},
      {li:'USPS Hold Mail® - The Basics'},
      {li:'Mailing Your Tax Return'},
      {li:'Scams & Scheme Alerts'},
    ]
  }
])
const cardList=ref([
  {
    title:'File a Claim',
    text:'If an insured delivery doesn\'t go as planned, it\'s easy to file an insurance claim online.',
    button:'Filling a Claim'
  },
  {
    title:'Request a Refund',
    text:'Had trouble with a product or service? Find out if you\'re eligible for a refund.',
    button:'Learn More'
  },
  {
    title:'Contact Us',
    text:'If you\'re having trouble resolving a problem, there are several ways to get help.',
    button:'Find Out How'
  },
])
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.icon{
  width: 100%;
  height: 100%;
}
.top{
  height: 200px;
  width: 100%;
  /* background-color: yellowgreen; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-image: url('../../assets/image/faqhero.png');
  .title{
    width: 100%;
    overflow-wrap: break-word;
    /* background-color: violet; */
    color: #ffffff;
    font-size:55px;
    font-weight: 600;
    text-align: center;
    /* padding: 0; */
    margin-top: 30px;
  }
  .main{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    height: 50px;
    width: 800px;
    overflow: hidden;
    border-bottom: 2px solid rgb(255, 255, 255);
    .el-input{
      background-color: rgba(153, 205, 50, 0);
      /* border: 0; */
    }
    :deep(.el-input__wrapper){
      background-color: rgba(241, 241, 2, 0);
      box-shadow: 0 0 0 0;
    }
    :deep(.el-input__inner::placeholder){
      font-size: 18px;
    }
    .seach{
      width: 30px;
      height: 30px;
      /* background-color: whitesmoke; */
      margin: auto 9px;
    }
  }
  .main:hover{
    /* border-color: var(--slds-s-input-color-border-focus, var(--lwc-colorBorderInputActive, rgb(27, 150, 255))); */
    /* background-color: var(--slds-g-color-neutral-base-100, var(--lwc-colorBackgroundInputActive, rgb(255, 255, 255))); */
    box-shadow: var(--slds-s-input-shadow-focus, var(--lwc-shadowButtonFocus, 0 0 3px #0176d3));
  }
}
.one{
  /* width: 100%-70px; */
  height: 250px;
  min-width: 1170px;
  /* position: relative; */
  /* overflow-wrap: break-word; */
  margin-top: 100px;
  /* background-color: yellowgreen; */
  margin-left: 70px;
  .box{
    width: 32%;
    margin-right: 10px;
    float: left;
    /* background-color: #d1df0e; */
    display: flex;
    flex-direction: column;
    .title{
      font-size: 27px;
      font-weight: 700;
      color: #333366;
      line-height: 44px;
    }
    a{
      font-size: 14px;
      margin-top: 4px;
      width: 100%;
      /* background-color: white; */
      color: #0176d3;
    }
  }
}
.two{
  width: 100%-20%;
  /* height: 340px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  margin: 0 10px;
  /* overflow: hidden; */
  .title{
    text-align: center;
    /* margin-top: 45px; */
    padding-top: 45px;
    font-size: 28px;
    font-weight: 600;
    color: #333366;
  }
  .text{
    text-align: center;
    margin-top: 7px;
    color: #646464;
  }
  .big-box{
    margin: 0 auto;
    width: 1170px;
    height: 100px;
    margin-top: 20px;
    /* background-color: rgba(153, 205, 50, 0.507); */
    transform: skew(-12deg);
    display: flex;
    flex-direction: row;
    .menu{
      width: 234px;
      height: 60px;
      border-right: 2px solid #333366;
      /* background-color: rgba(255, 255, 0, 0.644); */
      .box{
        width: 150px;
        /* height: 100%; */
        overflow-wrap: break-word;
        /* background-color: #ff0000; */
        margin: 0 auto;
        transform: skew(12deg);
        display: flex;
        flex-direction: column;
        align-items: center;
        .img{
          margin-top: 4px;
          width: 45px;
          height: 40px;
          /* position: absolute; */
          z-index: 44;
          /* background-color: violet; */
        }
        .text{
          /* width: 10px;
          height: 10px; */
          font-size: 14px;
          font-weight: 600;
          color: #333366;
          overflow-wrap: break-word;
          margin-top: 15px;
          /* background-color: #0176d3; */
        }
        .mo{
          
          width: 100%;
            height: 100%;
            position: absolute;
            z-index: 22;
            /* background-color: #13d301; */
            top:0;
        }
        .mo:hover{
          background-color: #f7f7f78e;
        }
      }
    }

  }
}
.three{
  width: 100%;
  overflow-wrap: break-word;
  /* background-color: yellowgreen; */
  margin: 30px 0;
  text-align: center;
  a{
    color: #0176d3;
    font-weight: 700;
  }
}
.four{
  width: 100%;
  overflow-wrap: break-word;
  /* background-color: #0176d3; */
  margin-bottom: 100px;
  display: grid;
  grid-gap:60px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  .box{
    /* width: 350px; */
    width: 89%;
    display: flex;
    flex-direction: column;
    /* background-color: yellowgreen; */
    position: relative;
    padding-bottom: 50px;
    /* margin-right: 10px; */
    .title{
      text-align: center;
      font-size: 29px;
      font-weight: 700;
      color: #333366;
    }
    .text{
      margin-top: 15px;
      text-align: center;
    }
    .button{
      position: absolute;
      width: 100%;
      height: 45px;
      bottom: 0;
      display: flex;
      /* align-items: center; */
      justify-content: center;
      /* background-color: #48a740; */
      .el-button{
        /* width: 200px; */
        height: 100%;
        padding: 0 50px;
        background-color: #333366;
        border: 0;
        color: #ffffff;
        font-size: 15px;
      }
    }
  }
}
</style>